<template>
	<view style="flex: 1;flex-direction: column;background-color: #F5F0E5;height: 100vh;min-height: 100%;" catchtouchmove="false">
		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto"
		 :scroll-left="scrollLeft">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="tab.id" :data-current="index" @click="ontabtap">
				<text v-if="tab.name.length==4" class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				<text v-if="tab.name.length==5" style="font-size: 26rpx;" class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				<text v-if="tab.name.length==6" style="font-size: 23rpx;" class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
				<text v-if="tab.name.length==7" style="font-size: 20rpx;" class="uni-tab-item-title" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.name}}</text>
			</view>
		</scroll-view>

		<swiper :current="tabIndex" class="swiper-box" :style="{height: scrollHeight}" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,spIndex) in tabBars" :key="spIndex">
				<scroll-view :style="{height: scrollHeight}" :scroll-y="true" :show-scrollbar="false" :scroll-top="scrollTop">
					<!-- 姓氏始祖 -->
					<view v-if="spIndex==0" style="flex: 1;flex-direction: column;display: flex;">
						<view v-if="getInFo.length>0" v-for="(item,index) in getInFo" :key="index">
							<view class="shuzu-title-view" v-if="index==0&&title">
								<image class="shuzu-title-bg" src="../../static/fhm_detail_title_bg.png" mode="scaleToFill"></image>
								<text v-if="tab.name.length==4" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==5" style="font-size: 36rpx;" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==6" style="font-size: 33rpx;" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==7" style="font-size: 30rpx;" class="shuzu-title-txt">{{title}}</text>
							</view>
							<view style="display: flex; flex-direction: column;">
								<image v-if="item.info.ShiZu_avatar" class="shizu-head" :src="item.info.ShiZu_avatar"></image>
								<text v-if="item.info.ShiZu_name" class="shizu-name">{{item.info.ShiZu_name}}</text>
								<text v-if="item.info.ShiZu_hap" class="shizu-renqi">人气:{{item.info.ShiZu_hap}}</text>
								<text class="shizu-renqi">百家姓:{{item.info.Rank}}</text>
								<text class="shizu-renqi">总人口:{{item.info.PopulationCount}}</text>
								<text v-if="item.datas.content" class="shizu-desc">{{item.datas.content}}</text>
								<!-- 图片布局 -->
								<view v-if="item.info.datas.resource.length>0" class="grid-body">
									<view v-if="item.info.datas.resource.length==3
									||item.info.datas.resource.length==5||item.info.datas.resource.length==6
									||item.info.datas.resource.length==7||item.info.datas.resource.length==8
									||item.info.datas.resource.length==9"
									 class="grid-item-box3" v-for="(picItem, picIndex) in item.info.datas.resource" :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image3" mode="aspectFill" />
									</view>
									<view v-if="item.info.datas.resource.length==2||item.info.datas.resource.length==4" class="grid-item-box2"
									 v-for="(picItem, picIndex)  in item.info.datas.resource" :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image2" mode="aspectFill" />
									</view>
									<view v-if="item.info.datas.resource.length==1" class="grid-item-box1" v-for="(picItem, picIndex) in item.info.datas.resource"
									 :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image1" mode="aspectFill" />
									</view>
								</view>
								<text v-if="item.info.author_name" class="shizu-zuozhe">创建人：{{item.info.author_name}}</text>
							</view>
						</view>
						<view v-if="getInFo.length==0" class="shuzu-empty-view">
							<image class="shuzu-empty-img" src="../../static/icon-xianzu-empty.png" mode="scaleToFill"></image>
							<text class="shuzu-empty-text">暂无{{title}}内容,请打开拾亲app查看详情</text>
						</view>
					</view>
					<!-- 姓氏起源，迁徙分布，郡望堂号，宗祠对联，典故趣事，家风家训，某姓文旅，字辈排行，家谱文献，某姓新闻，某姓名人，某姓族徽 -->
					<view v-if="spIndex!=0&&spIndex!=10&&spIndex!=13&&spIndex!=14&&spIndex!=15" style="flex: 1;flex-direction: column;display: flex;">
						<view v-if="getInFo.length>0" v-for="(item,index) in getInFo" :key="index">
							<view class="shuzu-title-view" v-if="index==0&&item.datas.content">
								<!-- <image class="shuzu-title-bg" src="../../static/home-menu-detail-title-bg.png" mode="scaleToFill"></image> -->
								<image class="shuzu-title-bg" src="../../static/fhm_detail_title_bg.png" mode="scaleToFill"></image>
								<text v-if="tab.name.length==4" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==5" style="font-size: 36rpx;" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==6" style="font-size: 33rpx;" class="shuzu-title-txt">{{title}}</text>
								<text v-if="tab.name.length==7" style="font-size: 30rpx;" class="shuzu-title-txt">{{title}}</text>
							</view>
							<view style="display: flex; flex-direction: column;">
								<text v-if="item.datas.content" class="shizu-desc">{{item.datas.content}}</text>
								<!-- 图片布局 -->
								<view v-if="item.info.datas.resource.length>0" class="grid-body">
									<view v-if="item.info.datas.resource.length==3
									||item.info.datas.resource.length==5||item.info.datas.resource.length==6
									||item.info.datas.resource.length==7||item.info.datas.resource.length==8
									||item.info.datas.resource.length==9"
									 class="grid-item-box3" v-for="(picItem, picIndex) in item.info.datas.resource" :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image3" mode="aspectFill" />
									</view>
									<view v-if="item.info.datas.resource.length==2||item.info.datas.resource.length==4" class="grid-item-box2"
									 v-for="(picItem, picIndex)  in item.info.datas.resource" :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image2" mode="aspectFill" />
									</view>
									<view v-if="item.info.datas.resource.length==1" class="grid-item-box1" v-for="(picItem, picIndex) in item.info.datas.resource"
									 :index="picIndex" :key="picIndex">
										<image :src="picItem.url" class="grid-item-box-image1" mode="aspectFill" />
									</view>
								</view>
								<text v-if="item.info.author_name" class="shizu-zuozhe">创建人：{{item.info.author_name}}</text>
							</view>
						</view>
						<view v-if="getInFo.length==0" class="wenzhang-empty-view">
							<image class="wenzhang-empty-img" src="../../static/icon-wenzhang-empty.png" mode="scaleToFill"></image>
							<text class="wenzhang-empty-text">暂无{{title}}内容,请打开拾亲app查看详情</text>
						</view>
					</view>
					<!-- 姓氏新闻 -->
					<view v-if="xinwenList.length>0&&spIndex==10" class="xinwen-body">
						<view class="xinwen-item" v-for="(xinwenItem, xinwenIndex) in xinwenList" :index="xinwenIndex" :key="xinwenIndex"
						 @click="goArticleDetails" :data-index="xinwenItem">
							<image v-if="xinwenItem.icon_image" :src="xinwenItem.icon_image" class="xinwen-item-image" mode="scaleToFill" />
							<view class="xinwen-txt-body" v-if="xinwenItem.name">
								<text class="xinwen-item-title">{{xinwenItem.name}}</text>
								<text class="xinwen-item-desc">{{xinwenItem.content}}</text>
							</view>
						</view>
					</view>
					<view v-if="xinwenList.length==0&&spIndex==10" class="wenzhang-empty-view">
						<image class="wenzhang-empty-img" src="../../static/icon-wenzhang-empty.png" mode="scaleToFill"></image>
						<text class="wenzhang-empty-text">暂无{{xing}}氏新闻内容,请打开拾亲app查看详情</text>
					</view>
					<!-- 姓氏英烈 -->
					<view v-if="yinglieList.length>0&&spIndex==13" class="xinwen-body">
						<view class="shuzu-title-view">
							<!-- <image class="shuzu-title-bg" src="../../static/home-menu-detail-title-bg.png" mode="scaleToFill"></image> -->
							<image class="shuzu-title-bg" src="../../static/fhm_detail_title_bg.png" mode="scaleToFill"></image>
							<text class="shuzu-title-txt">{{title}}</text>
						</view>
						<view class="yinglie-item-paret">
							<view class="yinglie-item" v-for="(yinglieItem, yinglieIndex) in yinglieList" :index="yinglieIndex" :key="yinglieIndex">
								<image v-if="yinglieItem.photo" :src="yinglieItem.photo" class="yinglie-item-image" mode="aspectFill" />
								<text v-if="yinglieItem.name" class="yinglie-item-name">{{yinglieItem.name}}</text>
								<text v-if="yinglieItem.hap" class="yinglie-item-hot">人气:{{yinglieItem.hap}}</text>
							</view>
						</view>
					</view>
					<view v-if="yinglieList.length==0&&spIndex==13" class="yinglie-empty-view">
						<image class="yinglie-empty-img" src="../../static/icon-lieshi-empty.png" mode="scaleToFill"></image>
						<text class="yinglie-empty-text">暂无{{xing}}氏英烈内容,请打开拾亲app查看详情</text>
					</view>
					<button class="share-page-btn" open-type="share">
						<image style="width: 315rpx;height: 96rpx;" src="../../static/icon_page_share_btn.png" mode="scaleToFill"></image>
					</button>
				</scroll-view>
			</swiper-item>
		</swiper>
		<LoginTipDialog :isShow="isShowLoginTip" dataSource="登录查看具体信息" @returnLoginTipDialog="returnLoginTipDialog" />
	</view>
</template>

<script>
	import request from '../index/request.js';
	import LoginTipDialog from "@/components/login-tip-dialog/login-tip-dialog.vue";
	export default {
		components: {
			LoginTipDialog
		},
		data() {
			return {
				isShowLoginTip: false,
				xing: "",
				scrollHeight: "",
				title: "",
				imageUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3171043854,3327700684&fm=26&gp=0.jpg",
				tabIndex: -1,
				scrollLeft: 0, // 横向滚动条位置
				tabBars: [{
						name: '某姓始祖',
						id: 'ShiZu'
					},
					{
						name: '某姓起源',
						id: 'QiYuan'
					},
					{
						name: '迁徙分布',
						id: 'QianXi'
					},
					{
						name: '郡望堂号',
						id: 'JunWang'
					},
					{
						name: '宗祠对联',
						id: 'DuiLian'
					},
					{
						name: '典故趣事',
						id: 'DianGu'
					},
					{
						name: '家风家训',
						id: 'JiaFeng'
					},
					{
						name: '某姓文旅',
						id: 'CiTangFenBu'
					},
					{
						name: '字辈排行',
						id: 'ZiBei'
					},
					{
						name: '家谱文献',
						id: 'WenXian'
					},
					{
						name: '某姓新闻',
						id: 'XinWen'
					},
					{
						name: '某姓名人',
						id: 'LiShi'
					},
					{
						name: '某姓族徽',
						id: 'ZuHui'
					},
					{
						name: '某姓英烈',
						id: 'YingLie'
					},
				],
				scrollInto: "",
				hasLocation: true,
				getInFo: [],
				xinwenList: [],
				yinglieList: [],
				hadClickTabStr: "-1",
				scrollTop: 0,
				contentScrollW: 0,
			}
		},
		mounted() {
			// 获取标题区域宽度，和每个子元素节点的宽度
			this.getScrollW()
		},
		methods: {
			returnLoginTipDialog: function(e) {
				this.isShowLoginTip = e.isclose
				if (e.tag) {
					uni.navigateTo({
						url: "../index/index"
					})
				}
			},
			onShow: function() {
				this.share.shareType = 0
				this.loginState()
			},
			onLoad: function(options) {
				this.appUtil.saveAppInviteId(options)
				uni.getSystemInfo({
					success: (res) => {
						const wid = res.windowWidth
						const hei = res.windowHeight
						// 230是除了可滚动区域外的其它部分占的rpx高度
						this.scrollHeight = (hei / (wid / 750) - 80) * (wid / 750) + 'px'
					}
				});
				this.xing = decodeURI(options.xing)
				this.tabBars.forEach(tab => {
					const position = this.tabBars.indexOf(tab)
					if (tab.name.includes("某")) {
						tab.name = tab.name.replace("某", this.xing)
					}
					this.$set(this.tabBars, position, tab)
				})
				if (options.tabIndex) {
					this.switchTab(options.tabIndex)
				} else {
					var title = decodeURI(options.title)
					for (var i = 0; i < this.tabBars.length; i++) {
						if (this.tabBars[i].name.includes(title)) {
							//初始化tab
							this.switchTab(i)
						}
					}
				}
			},
			loginState: function() {
				var user = uni.getStorageSync("shiqin-user")
				if (!user.PQD) {
					this.isShowLoginTip = true
				}
			},
			// 获取标题区域宽度，和每个子元素节点的宽度以及元素距离左边栏的距离
			getScrollW: function() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.scroll-h').boundingClientRect(data => {
					// 拿到 scroll-view 组件宽度
					this.contentScrollW = data.width
				}).exec();
				query.selectAll('.uni-tab-item').boundingClientRect(data => {
					let dataLen = data.length;
					for (let i = 0; i < dataLen; i++) {
						//  scroll-view 子元素组件距离左边栏的距离
						this.tabBars[i].left = data[i].left;
						//  scroll-view 子元素组件宽度
						this.tabBars[i].width = data[i].width
					}
				}).exec()
			},
			ontabtap: function(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			ontabchange: function(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			switchTab: function(index) {
				if (this.tabIndex === index) {
					return;
				}
				//设置选中tab位置
				this.scrollLeft = this.tabBars[index].left - this.contentScrollW / 2 + this.tabBars[index].width / 2;
				this.tabIndex = index;
				this.title = this.tabBars[this.tabIndex].name
				uni.setNavigationBarTitle({
					title: this.title
				})
				this.scrollInto = this.tabBars[index].id
				if (!this.hadClickTabStr.includes('' + this.tabIndex)) {
					this.hadClickTabStr = this.hadClickTabStr + '' + this.tabIndex
					this.gotop()
				}
				this.GetData()
				this.share.url = '/pages/home-menu-detail/index?appInviteId=' + this.appUtil.getAppInviteId() + '&tabIndex=' +
					this.tabIndex + '&xing=' + this.xing
			},
			GetData: function() {
				var that = this
				switch (that.tabBars[this.tabIndex].id) {
					case "XinWen":
						//新闻
						that.GetNewInFo()
						break;
					case "YingLie":
						//英烈
						that.GetYingLieInFo()
						break;
					default:
						that.GetInFo()
						break;
				}
			},
			GetInFo: function() {
				var that = this
				request.post("api/xingshi/GetInFo", {
					surname: that.xing,
					type: that.tabBars[this.tabIndex].id
				}).then(data => {
					that.getInFo = data
				})
			},
			GetNewInFo: function() {
				var that = this
				request.post("api/common/H5_page", {
					lave: that.xing
				}).then(data => {
					that.xinwenList = data.datas
				})
			},
			GetYingLieInFo: function() {
				var that = this
				request.post("api/common/yinglie_list", {
					xing: that.xing,
				}).then(data => {
					that.yinglieList = data.datas
				})
			},
			goArticleDetails: function(e) {
				var item = e.currentTarget.dataset.index
				uni.navigateTo({
					url: '/pages/article-details/index?load_url=' + encodeURIComponent(item.url) +
						"&title=" + item.name
				})
			},
			gotop: function() {
				var that = this
				this.scrollTop = 1;
				this.$nextTick(function() {
					that.scrollTop = 0;
				});
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
